import React, { FC } from 'react';
import { router } from 'ray';
import { View, Image, exitMiniProgram } from '@ray-js/ray';
import styles from './index.module.less';

import { ic_return } from '@/res/index'


type Props = {
  title: string;
  children?: React.ReactNode;
  rightHandle?: () => {};
  dsc?: string;
};

const TopBar: FC<Props> = ({ title, children, rightHandle, dsc }) => {
  const handleBack = () => {
    router.back();
  };
  const exit = () => {
    exitMiniProgram()
  };

  return (
    <View className={styles.topBar}>
        <Image mode='aspectFit' src={ic_return} style={{ width: "79rpx", height: "74rpx"}}  onClick={handleBack}/>
      <View className={`${styles.title}`} style={{width: "55vw" }}>
        <View>{title}</View>
        <View style={{ fontSize: "24rpx", color: "rgba(255,255,255,.6)" }}>{dsc}</View>
      </View>
      <View onClick={rightHandle} style={{width: "15vw" , zIndex: "999" , display: "flex", alignItems: "flex-end", justifyContent: "flex-end" }}>
        {children && children}
      </View>
    </View>
  );
};

export default TopBar;
